<template>
  <el-container style="padding: 20px">
    <el-main>
      <el-card>
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <span style="font-weight: bold">核查记录列表</span>
          <el-form :inline="true" size="small">
            <el-form-item label="疫苗编号">
              <el-input
                v-model="searchVaccineNumbering"
                placeholder="请输入疫苗编号"
                clearable
                style="width: 200px"
                @keyup.enter.native="searchRecords"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchRecords">
                <el-icon><Search /></el-icon>
                搜索
              </el-button>
            </el-form-item>
          </el-form>
        </div>

        <el-table
          :data="checkRecords"
          style="margin-top: 20px"
          border
          v-loading="loading"
        >
          <el-table-column prop="id" label="记录ID" width="90" />
          <el-table-column
            prop="vaccineNumbering"
            label="疫苗编号"
            width="140"
          />
          <el-table-column prop="checkNumber" label="核查编号" width="100" />
          <el-table-column
            prop="checkTime"
            label="核查时间"
            width="140"
            :formatter="(row) => formatDate(row.checkTime)"
          />
          <el-table-column
            prop="flag"
            label="是否合规"
            width="100"
            :formatter="(row) => (row.flag ? '是' : '否')"
          />
          <el-table-column prop="reason" label="不合规原因" width="180" />
          <el-table-column label="操作" width="120">
            <template #default="scope">
              <el-button
                size="small"
                type="info"
                @click="openDetailDialog(scope.row)"
              >
                <el-icon><Search /></el-icon>
                详细
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-pagination
          style="margin-top: 20px; text-align: right"
          layout="prev, pager, next"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          @current-change="handlePageChange"
          :hide-on-single-page="true"
        />
      </el-card>

      <!-- 详情弹窗 -->
      <el-dialog
        title="核查记录详情"
        v-model="detailDialogVisible"
        width="600px"
        :before-close="
          () => {
            detailDialogVisible = false
          }
        "
      >
        <el-form
          label-width="120px"
          :model="detailData"
          class="detail-form"
          readonly
        >
          <el-form-item label="记录ID">
            <el-input v-model="detailData.id" disabled />
          </el-form-item>
          <el-form-item label="疫苗编号">
            <el-input v-model="detailData.vaccineNumbering" disabled />
          </el-form-item>
          <el-form-item label="核查编号">
            <el-input v-model="detailData.checkNumber" disabled />
          </el-form-item>
          <el-form-item label="核查时间">
            <el-input :value="formatDate(detailData.checkTime)" disabled />
          </el-form-item>
          <el-form-item label="是否合规">
            <el-input :value="detailData.flag ? '是' : '否'" disabled />
          </el-form-item>
          <el-form-item label="不合规原因" v-if="!detailData.flag">
            <el-input v-model="detailData.reason" type="textarea" disabled />
          </el-form-item>
          <el-form-item label="创建时间">
            <el-input :value="formatDate(detailData.createdAt)" disabled />
          </el-form-item>
          <el-form-item label="更新时间">
            <el-input :value="formatDate(detailData.updatedAt)" disabled />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="detailDialogVisible = false">关闭</el-button>
        </template>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { Search } from '@element-plus/icons-vue'

const searchVaccineNumbering = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const checkRecords = ref([])
const loading = ref(false)

const detailDialogVisible = ref(false)
const detailData = ref({})

// 原生 JS 格式化日期为 yyyy-MM-dd
function formatDate(value) {
  if (!value) return ''
  const date = new Date(value)
  if (isNaN(date.getTime())) return ''
  const y = date.getFullYear()
  const m = (date.getMonth() + 1).toString().padStart(2, '0')
  const d = date.getDate().toString().padStart(2, '0')
  return `${y}-${m}-${d}`
}

// 请求接口，获取数据
async function fetchRecords() {
  loading.value = true
  try {
    const res = await axios.get(
      'http://127.0.0.1:8181/checkRecords/searchRecords',
      {
        params: {
          vaccineNumbering: searchVaccineNumbering.value.trim(),
          page: currentPage.value,
          size: pageSize.value,
        },
      }
    )
    if (res.data.code === 0) {
      checkRecords.value = res.data.data.data || []
      total.value = res.data.data.total || 0
    } else {
      checkRecords.value = []
      total.value = 0
      ElMessage.error(res.data.msg || '查询失败')
    }
  } catch (error) {
    ElMessage.error('接口请求失败')
    checkRecords.value = []
    total.value = 0
  } finally {
    loading.value = false
  }
}

// 点击搜索按钮或回车
function searchRecords() {
  currentPage.value = 1
  fetchRecords()
}

// 处理分页页码变化
function handlePageChange(page) {
  currentPage.value = page
  fetchRecords()
}

// 打开详情弹窗
function openDetailDialog(row) {
  detailData.value = { ...row }
  detailDialogVisible.value = true
}

onMounted(() => {
  fetchRecords()
})
</script>

<style scoped>
.detail-form .el-form-item {
  margin-bottom: 10px;
}
</style>
